<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Document</title>
    <link rel="stylesheet" href="{{asset(env("CDN_HOST")."/resources/webuploader/webuploader.css")}}">
</head>
<body>
<div class="tab-pane" id="upload-pic"
     style="margin-bottom: -3.5em; margin-top: 0.5em;">
    <!--文件上传-->
    <div id="uploader" class="uploaderBox">
        <!--用来存放文件信息-->
        <div id="uploaderList" class="uploader-list"></div>
        <div class="btns">
            <div id="uploaderPicker">选择文件</div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
    </div>
</div>
<script src="{{asset(env("CDN_HOST")."/resources/jquery-3.3.1/jquery.min.js")}}"></script>
<script src="{{asset(env("CDN_HOST")."/resources/webuploader/webuploader.nolog.min.js")}}"></script>
<script>
    var uploadInit = function (config) {
        var uploader = WebUploader.create(config);

        //获取服务器响应状态(相关业务逻辑应在此写)
        uploader.on('uploadAccept', function (object, ret) {
            data = ret;
            // console.table(data)
            if (data.errorCode == 0) {
                //上传成功之后，展示图片
                $("#upload_img").attr("src", data.url);
                $("#pic_url").attr("value", data.url);
                $(".pic-msg .errormsg").html("");
                $("#select-picture").modal("hide");
            } else {
                alert(data.errorMessage);
            }
        })
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '<p class="state">等待上传...</p>' +
                '</div>'
                ),
                $img = $li.find('img');

            // $list为容器jQuery实例
            var $list = $("#uploaderList");

            //单次上传多个文件请修改方法为 append
            $list.html($li);
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            });
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css('width', percentage * 100 + '%');
        });
        //上传成功触发
        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).find('p.state').text('已上传');
        });
        //上传失败触发
        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });
        //无论成功失败都会触发
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });
        return uploader;
    }

    uploader = uploadInit({
        //formData 携带的form参数
        formData: {
            '_token': $('meta[name="csrf-token"]').attr('content'),
            'token': '{{env("UPLOAD_TOKEN")}}',
        },
        // 验证文件总数量, 超出则不允许加入队列。
        fileNumLimit: 1,
        //自动上传的开关
        auto: false,
        // swf文件路径
        swf: '{{asset(env("CDN_HOST")."/resources/webuploader/Uploader.swf")}}',
        //设置文件上传域的name
        fileVal: 'file',
        // 文件接收服务端。
        server: '{{url("upload/upload")}}',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#uploaderPicker',

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        // resize: false,
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        //缩略图属性
        thumb: {
            width: 320,
            height: 180,

            // 图片质量，只有type为`image/jpeg`的时候才有效。
            quality: 70,

            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            allowMagnify: true,

            // 是否允许裁剪。
            crop: true,

            // 为空的话则保留原有图片格式。
            // 否则强制转换成指定的类型。
            type: 'image/jpeg'
        }
    });
    //选择文件触发
    $("#uploader").on('click', '.webuploader-pick', function () {
        $(this).next().find("label").click()
    })
    //单文件时重置
    $("#uploader").on('click', 'label',function () {
        uploader.reset()
    })
    //手动上传提示
    $("#uploader").on('click', '#ctlBtn', function () {
        uploader.upload()
    });
</script>
</body>
</html>